<template>
    <div>
        <div class="header_wrap">
            <div class="avator">
                <el-avatar :size="60" :src="user.avatar"></el-avatar>
            </div>
            <div class="greeting">
                <div class="hello">早安，{{user.realname}}，开始您一天的工作吧！</div>
                <div class="weather">
                    <i class="el-icon-lightning" style="color: rgb(64, 169, 255);background-color: rgb(230, 247, 255);"></i>
                    今日阴转小雨，22℃ - 32℃，出门记得带伞哦。
                </div>
            </div>
            <div class="workplace">
                <div class="box">
                    <div class="title">
                        <i class="el-icon-edit" style="color: rgb(64, 169, 255);background-color: rgb(230, 247, 255);"></i>
                        项目数
                    </div>
                    <div class="content">12</div>
                </div>
                <div class="box">
                    <div class="title">
                        <i class="el-icon-edit" style="color: rgb(255, 169, 64); background-color: rgb(255, 247, 230);"></i>
                        待办项
                    </div>
                    <div class="content">3 / 24</div>
                </div>
                <div class="box">
                    <div class="title">
                        <i class="el-icon-edit" style="color: rgb(115, 209, 61); background-color: rgb(246, 255, 237);"></i>
                        积分
                    </div>
                    <div class="content">{{1689|separateNum}}</div>
                </div>
            </div>
        </div>

        <div class="body_wrap">
            <el-row :gutter="20">
                <el-col class="left" :xs="24" :sm="24" :md="24" :lg="16" :xl="16">

                    <el-row class="left_box_wrap">
                        <el-col>
                            <div class="header">
                                <div class="title">
                                    <i class="el-icon-s-grid" style="color: rgb(64, 169, 255);"></i>
                                    我的项目
                                </div>
                                <div class="more">全部项目</div>
                            </div>
                            <div class="content">
                                <div class="project"></div>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row class="left_box_wrap">
                        <el-col>
                            <div class="header">
                                <div class="title">
                                    <i class="el-icon-table-lamp" style="color: rgb(114, 46, 209);"></i>
                                    动态
                                </div>
                            </div>
                            <div class="content">
                                <div class="list_wrap">
                                    <div class="items" v-for="(item, index) in userList" :key="index">
                                        <div class="cell avator">
                                            <el-avatar size="small" :src="item.avator"></el-avatar>
                                        </div>
                                        <div class="cell content">
                                            <div class="name"><strong>Echo 提出问题 Table 中使用 Poptip 遮挡问题</strong></div>
                                            <div class="desc">2018-08-07 13:52:18</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>

                </el-col>
                <el-col class="right" :xs="24" :sm="24" :md="24" :lg="8" :xl="8">
                    <el-row class="right_box_wrap">
                        <el-col>
                            <div class="header">
                                <div class="title">
                                    <i class="el-icon-thumb" style="color: rgb(255, 77, 79);"></i>
                                    快捷操作
                                </div>
                                <div class="more">
                                    <i class="el-icon-s-tools"></i>
                                </div>
                            </div>
                            <div class="content">
                                <el-row :gutter="10">
                                    <el-col :span="8" v-for="(item, index) of list" :key="index">
                                        <div class="card_wrap">
                                            <div :class="`icon ${item.icon}`" :style="`color:${item.color}`"></div>
                                            <div class="name">{{item.name}}</div>
                                        </div>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row class="right_box_wrap">
                        <el-col>
                            <div class="header">
                                <div class="title">
                                    <i class="el-icon-edit-outline" style="color: rgb(250, 173, 20);"></i>
                                    待办事项
                                </div>
                            </div>
                            <div class="content">
                                <!-- 表格 -->
                                <el-table
                                    ref="table"
                                    size="medium"
                                    class="todoList"
                                    empty-text="暂无数据"
                                    element-loading-text="给我一点时间"
                                    fit highlight-current-row
                                    :data="todoList">

                                    <el-table-column type="selection" width="55" align="center"></el-table-column>
                                    <el-table-column label="任务" prop="task" align="left" show-overflow-tooltip />
                                    <el-table-column label="协作者" prop="actor" align="left" width="100">
                                        <template>
                                            <div class="actor_wrap">
                                                <div class="item" :style="`margin-left:${index>0?-10:0}px`" v-for="(item, index) of 3" :key="index">
                                                    <el-avatar size="small" src="https://dev-file.iviewui.com/userinfosvaY5tb7yfnSFTTimcjy3vuSG6RC28v2/avatar"></el-avatar>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row class="right_box_wrap">
                        <el-col>
                            <div class="header">
                                <div class="title">
                                    <i class="el-icon-user-solid" style="color: rgb(82, 196, 26);"></i>
                                    小组成员
                                </div>
                            </div>
                            <div class="content">
                                <div v-for="(item, index) in userList" :key="index">
                                    <div class="list_wrap">
                                        <div class="cell avator">
                                            <el-avatar size="small" :src="item.avator"></el-avatar>
                                        </div>
                                        <div class="cell content">
                                            <div class="name"><strong>{{item.name}}</strong></div>
                                            <div class="desc">{{item.desc}}</div>
                                        </div>
                                        <div class="cell online">
                                            <el-tag type="success" v-if="item.online">在线</el-tag>
                                            <el-tag type="danger" v-else>下线</el-tag>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-col>
                    </el-row>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
    name: "Workplace",
    computed: {
        ...mapGetters(["user"])
    },
    data() {
        return {
            list: [
                {name: '用户', icon: 'el-icon-user-solid', color: 'rgb(105, 192, 255)'},
                {name: '分析', icon: 'el-icon-s-data', color: 'rgb(149, 222, 100)'},
                {name: '商品', icon: 'el-icon-shopping-cart-full', color: 'rgb(255, 156, 110)'},
                {name: '订单', icon: 'el-icon-s-order', color: 'rgb(179, 127, 235)'},
                {name: '票据', icon: 'el-icon-tickets', color: 'rgb(255, 214, 102)'},
                {name: '消息', icon: 'el-icon-chat-dot-square', color: 'rgb(92, 219, 211)'},
            ],

            todoList: [
                {task: '事情在起变化？他们开始感谢中国了', },
                {task: '甘肃防护林遭砍 官方：涉事公司在背后向政府施压', },
                {task: '交通运输部：除夕至初六小型客车免收高速通行费', },
                {task: '拜登和普京的第一个电话 激烈交锋就在这三个细节里', },
                {task: '美国出现两个总统？特朗普“自立为王“ 拜登很无奈', },
                {task: '中美关系前景如何？中国驻美大使崔天凯最新回应', }
            ],

            userList: [
                {name: '中小鱼', desc: 'Designer', avator: 'https://dev-file.iviewui.com/userinfoYLhfo1S945BOLuFT96NRStYeYDFRviF5/avatar', online: true},
                {name: 'Echo', desc: 'Designer', avator: 'https://dev-file.iviewui.com/userinfoxlXwHVwZkCQtl1Zyd1wrvF78b1rZkhfK/avatar', online: true},
                {name: '唐不苦', desc: 'Product Manager', avator: 'https://dev-file.iviewui.com/userinfosvaY5tb7yfnSFTTimcjy3vuSG6RC28v2/avatar', online: false},
                {name: '甜筒', desc: 'Manager', avator: 'https://dev-file.iviewui.com/userinforaP8NeQgYpmKgkpWlqZP7rfewbHiIzJY/avatar', online: true},
            ]
        };
    },

    created() {},

    mounted() {
        this.$nextTick(() => {});
    },

    methods: {}
};
</script>

<style lang="scss" scoped>
@import './index';
</style>
